/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-09 01:09:00
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import FabricText from "@/myFabric/FabricText";
import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import boldSVG from "./bold.svg";
import bold_activeSVG from "./bold_active.svg";
import styles from "./toolTextBold.module.less";
import nameNumStore from "@/editorComponent/LeftMenu/NameNum/nameNumStore";

interface Iprops {
}

// 字体粗体
export default function ToolTextBold() {

  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [fontBold, setFontBold] = useState(true);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    const { step } = nameNumStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "i-text") {
      const { fontWeight } = activeObject as FabricText;
      const lockNameNum = (["name", "num"].includes(activeObject.name || "") && step === 3);
      setFontBold(fontWeight === "bold");
      setVisible(true);
      setDisable(lock || lockNameNum);
    } else {
      setVisible(false);
    }
  }), []);

  return (
    <Tooltip
      title="粗体文字"
      placement="top"
      mouseLeaveDelay={0}
      mouseEnterDelay={0.5}
    >
      <span
        className={clsx(styles.toolTextBold, visible && styles.visible, fontBold && styles.active, disable && styles.disable)}
      >
        <img
          alt=""
          onClick={() => {
            designEditor.setFontWeight(fontBold ? "normal" : "bold");
            setFontBold(!fontBold);
          }}

          src={fontBold ? bold_activeSVG : boldSVG}
        />
      </span>
    </Tooltip>
  );

}